<template>
  <view class="cont">
    <view v-if="articleList.length > 0">
      <view
        v-for="(item, index) in articleList"
        :key="index"
        class="s-c-item"
        @click="showArticleDetail(item.articleId)"
      >
        {{ item.articleName || item.name }}
      </view>
    </view>
    <view v-else>暂无保险条款</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      title: '',
      articleList: []
    };
  },
  onLoad() {
    let { title, articleList } = this.$store.state.service;
    if (title && articleList) {
      this.title = title;
      this.articleList = articleList;
      uni.setNavigationBarTitle({
        title: this.title
      });
    } else {
      uni.showModal({
        title: '提示',
        content: '列表页title和list不存在'
      });
    }
  },
  methods: {
    showArticleDetail(articleId) {
      // 显示服务详情
      this.$wxPromise.navigateTo({
        url: '/pages/service/agreeDetail?articleId=' + articleId
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.cont {
  width: 700rpx;
  padding-top: 32rpx;
  margin: auto;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .s-c-item {
    line-height: 60rpx;
    color: #2680eb;
    margin-bottom: 24rpx;
    position: relative;
    padding-left: 40rpx;
    &:before {
      width: 12rpx;
      height: 12rpx;
      background: #2680eb;
      border-radius: 12rpx;
      content: '';
      position: absolute;
      top: 30rpx;
      left: 0rpx;
    }
  }
}
</style>
